<template>
  <el-form
    ref="formRef"
    :model="form"
    :rules="rules"
    label-width="120px"
  >
    <el-form-item label="服务器地址" prop="host">
      <el-input v-model="form.host" placeholder="192.168.1.100" />
    </el-form-item>
    
    <el-form-item label="SSH端口" prop="port">
      <el-input-number v-model="form.port" :min="1" :max="65535" placeholder="22" />
    </el-form-item>
    
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username" placeholder="root" />
    </el-form-item>
    
    <el-form-item label="认证方式" prop="authType">
      <el-radio-group v-model="form.authType">
        <el-radio label="password">密码</el-radio>
        <el-radio label="privateKey">私钥</el-radio>
      </el-radio-group>
    </el-form-item>
    
    <el-form-item v-if="form.authType === 'password'" label="密码" prop="password">
      <el-input v-model="form.password" type="password" placeholder="请输入密码" />
    </el-form-item>
    
    <el-form-item v-if="form.authType === 'privateKey'" label="私钥路径" prop="privateKeyPath">
      <el-input v-model="form.privateKeyPath" placeholder="/path/to/private/key" />
    </el-form-item>
    
    <el-form-item label="私钥密码" prop="passphrase">
      <el-input v-model="form.passphrase" type="password" placeholder="私钥密码（可选）" />
    </el-form-item>
    
    <el-form-item label="部署模式" prop="deployMode">
      <el-radio-group v-model="form.deployMode">
        <el-radio label="local">本地部署</el-radio>
        <el-radio label="remote">远程部署</el-radio>
      </el-radio-group>
      <div class="form-tip">
        <el-text size="small" type="info">
          本地部署：项目将部署到本机目录，无需配置服务器<br>
          远程部署：项目将部署到远程服务器，需要配置SSH连接
        </el-text>
      </div>
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="handleSubmit" :loading="loading">
        保存配置
      </el-button>
      <el-button v-if="form.deployMode === 'remote'" @click="testConnection" :loading="testing">
        测试连接
      </el-button>
      <el-button @click="$emit('close')">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { useServerStore } from '@/stores/server'

const emit = defineEmits<{
  close: []
}>()

const serverStore = useServerStore()
const formRef = ref<FormInstance>()
const loading = ref(false)
const testing = ref(false)

const form = reactive({
  host: '',
  port: 22,
  username: 'root',
  authType: 'password',
  password: '',
  privateKeyPath: '',
  passphrase: '',
  deployMode: 'local'
})

const rules: FormRules = {
  host: [
    { required: true, message: '请输入服务器地址', trigger: 'blur' }
  ],
  port: [
    { required: true, message: '请输入SSH端口', trigger: 'blur' }
  ],
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ],
  privateKeyPath: [
    { required: true, message: '请输入私钥路径', trigger: 'blur' }
  ]
}

onMounted(async () => {
  try {
    const config = await serverStore.getConfig()
    Object.assign(form, config)
  } catch (error) {
    // 配置不存在，使用默认值
  }
})

const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    loading.value = true
    
    await serverStore.saveConfig(form)
    ElMessage.success('配置保存成功')
    emit('close')
  } catch (error) {
    if (error !== false) {
      ElMessage.error('保存失败')
    }
  } finally {
    loading.value = false
  }
}

const testConnection = async () => {
  try {
    testing.value = true
    await serverStore.testConnection(form)
    ElMessage.success('连接测试成功')
  } catch (error) {
    ElMessage.error('连接测试失败')
  } finally {
    testing.value = false
  }
}
</script>
